Vue组件通信

共计 1878 个字符，预计需要花费 5 分钟才能阅读完成。

非父子组件通信

事件总线

非父子组件之间，进行简易消息传递，可以使用事件总线（Event Bus）。

使用步骤：

1. 创建一个都能访问的事件总线（空 Vue 实例，放到 utils/EventBus.js）
2. A 组件（接收方）监听 Bus 实例的事件（订阅消息）
3. B 组件（发送方）触发 Bus 实例的事件（发布消息）

src\utils\EventBus.js 文件：

// 1. 创建一个都能访问的事件总线（空 Vue 实例）import Vue from 'vue'

const Bus = new Vue()

export default Bus

src\components\BaseA.vue 文件：

<template>
  <div>
    A 组件（接收方）<p>{{msg}}</p>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {created() {
    // 2. A 组件（接收方）监听 Bus 实例的事件（订阅消息）Bus.$on('sendMsg', (msg) => {this.msg = msg})
  },
  data() {
    return {msg: '',}
  },
}
</script>

src\components\BaseB.vue 文件：

<template>
  <div>
    B 组件（发送方）<button @click="clickSend"> 发布通知 </button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {clickSend() {
      // 3. B 组件（发送方）触发 Bus 实例的事件（发布消息）Bus.$emit('sendMsg', '消息内容')
    },
  },
}
</script>

src\App.vue 文件：

<template>
  <div>
    <BaseA></BaseA>
    <br />
    <hr />
    <br />
    <BaseB></BaseB>
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
export default {
  components: {
    BaseA,
    BaseB,
  },
}
</script>

provide 和 inject

作用是用来跨层级共享数据。

使用步骤：

1. 父组件 provide 提供数据
2. 子 / 孙组件 inject 取值使用

src\App.vue 文件：

<template>
  <div>
    App 组件
    <br />
    <SonA></SonA>
    <br />
    <SonB></SonB>
  </div>
</template>

<script>
import SonA from './components/SonA.vue'
import SonB from './components/SonB.vue'
export default {provide() {
    return {
      color: this.color, // 简单类型（非响应式）userInfo: this.userInfo, // 复杂类型（响应式）- 推荐
    }
  },
  data() {
    return {
      color: 'red',
      userInfo: {
        name: '张三',
        age: 18,
      },
    }
  },
  components: {
    SonA,
    SonB,
  },
}
</script>

src\components\SonA.vue 文件：

<template>
  <div>
    -SonA 组件
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: {GrandSon,},
}
</script>

src\components\GrandSon.vue 文件：

<template>
  <div>--GrandSon 组件：{{color}} - {{userInfo.name}}</div>
</template>

<script>
export default {inject: ['color', 'userInfo'],
}
</script>

src\components\SonB.vue 文件：

<template>
  <div>-SonB 组件：{{color}} - {{userInfo.age}}</div>
</template>
<script>
export default {inject: ['color', 'userInfo'],
}
</script>